import React from 'react'
import Layout from "./layout";
import {BrowserRouter} from 'react-router-dom'
import {Navigate, Route, Routes} from 'react-router'
import {routes as routerRAW, bindRouter} from "./layout/routes.jsx";
import Login from "./pages/Login";
import {menuDate} from "./layout/menuList.js";

function generateRoute(value, key) {
    if (!value.routes)
        return <Route path={value.path} key={key} element={
            value.component ?
                <React.Suspense
                    fallback={
                        <div>路由懒加载...</div>
                    }>
                    <value.component/>
                </React.Suspense>
                :
                undefined
        }
        />

    else {
        return <Route path={value.path} key={key} element={
            value.component ?
                <React.Suspense
                    fallback={
                        <div>路由懒加载...</div>
                    }>
                    <value.component/>
                </React.Suspense>
                :
                undefined
        }>
            {value.routes?.map((value, key) => generateRoute(value, key))}
        </Route>;

    }
}

function App() {
    const routes = [...bindRouter(menuDate),...routerRAW];// ...routes, ...routerRAW
    const token = '1';
    console.log(routes)

    return (
        <BrowserRouter>
            <Routes>
                <Route path="/login" element={<Login/>}/>
                <Route path="/" element={token ? <Navigate to="/home"/> : <Navigate to="/login"/>}/>
                <Route element={<Layout/>}>
                    {routes?.map((value, key) => {
                        const route = generateRoute(value, key);
                        return route;
                    })}
                </Route>
            </Routes>
        </BrowserRouter>
    )
}

export default App
